{extend name="layout/base"}

{block name="content"}
<div>   
    <table id="demo" lay-filter="test"></table>
</div>

<script type="text/html" id="stauts">
    {{# switch(d.cc_status) {
    case -1: }}
    <span class="layui-btn layui-btn-primary layui-btn-xs">未使用</span>
    {{# break;
    case 2: }}
    <span class="layui-btn layui-btn-normal layui-btn-xs">已使用</span>
    {{# break;
    default: }}
    未知
    {{# break;
    } }}
</script>

<script>
layui.use(['jquery', 'table'], function () {
    var table = layui.table;
    table.render({
        elem: '#demo',
        url: 'listsCate',
        page: true, 
        cols: [[
        {field: 'cc_id', title: 'ID'},
        {field: 'cc_title', title: '类型名称'},
        {field: 'cc_price', title: '价格(元)',templet:function(d){return d.cc_price/100}},
        {field: 'cc_term', title: '有限期长（月）'},
        {field: 'cc_status', title: '状态',templet:'#stauts'},
        ]]
    });
    //监听头部工具栏
    table.on('toolbar(test)', function(obj){
        var checkStatus = table.checkStatus(obj.config.id);
        switch(obj.event){
            case 'add':
            layer.msg('添加');
            break;
            case 'delete':
            layer.msg('删除');
            break;
            case 'update':
            layer.msg('编辑');
            break;
        };
    });
}) 
</script>
{/block}